<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>书籍管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">添加</el-button>
    <template>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="bookName"
                    label="书名"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="typeId"
                    label="类型"
                    width="200">
            </el-table-column>
            <el-table-column label="图片">
                <template slot-scope="scope">
                    <div class="block">
                        <el-image :src="scope.row.bookImage"></el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            icon="el-icon-edit"
                            size="mini"
                            @click="handleEdit(scope.row)"></el-button>
                    <el-button
                            icon="el-icon-delete"
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="changePage">
    </el-pagination>
    <el-dialog title="保存书籍" :visible.sync="dialogFormVisible" @close="clearForm">
        <el-form :model="form">
            <el-form-item label="书名" >
                <el-input v-model="form.bookName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="作者" >
                <el-input v-model="form.author" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="类型">
                <el-input v-model="form.typeId" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="图片">
                <el-upload
                        name="pic"
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveBook">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data: {
                tableData: [],  //表格数据
                total:10,        //数据总数
                dialogFormVisible:false, //控制对话框的显示
                form:{id:"",bookName:"",author:"",typeId:""}, //表单数据
                imageUrl: ''
            },
        methods:{
            //加载页面
            loadPage:function(page){
                axios.get("/books/page/"+page)
                    .then(value => {
                        if(value.data.code == 1){
                            this.tableData = value.data.data.records;
                            this.total = value.data.data.total;
                        }
                    });
            },
            //分页函数
            changePage:function(currentPage){
                console.log(currentPage);
                this.loadPage(currentPage);
            },
            saveBook:function(){
                //提交到服务器进行添加
                if(this.form.id == ""){
                    axios.post("/book",
                        {id:0,bookName: this.form.bookName,author:this.form.author,typeId:this.form.typeId,bookImage:this.imageUrl})
                        .then(value => {
                            if(value.data.code == 1){
                                this.loadPage(1);
                                this.dialogFormVisible = false;
                            }
                        });
                }else{
                    //id不为空，就更新
                    axios.put("/book",
                        {id:this.form.id,bookName: this.form.bookName,author:this.form.author,typeId:this.form.typeId,bookImage:this.imageUrl})
                        .then(value => {
                            if(value.data.code == 1){
                                this.loadPage(1);
                                this.dialogFormVisible = false;
                            }
                        });
                }
            },
            handleEdit:function(row){
                console.log(row);
                //显示对话框
                this.dialogFormVisible = true;
                //显示数据
                this.form.id = row.id;
                this.form.bookName = row.bookName;
                this.form.author = row.author;
                this.form.typeId = row.typeId;
                this.imageUrl = row.bookImage;
            },
            clearForm:function(){
                this.form.id = "";
                this.form.bookName = "";
                this.form.author = "";
                this.form.typeId = "";
                this.imageUrl = "";
            },
            handleDelete:function(row){
                this.$confirm('确定删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/book/"+row.id)
                        .then(value => {
                            if(value.data.code == 1){
                                this.loadPage(1);
                            }
                        });
                });
            },
            handleAvatarSuccess(res, file) {
                // this.imageUrl = URL.createObjectURL(file.raw);
                console.log(res);
                this.imageUrl = res.data;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
        mounted(){
            this.loadPage(1);
        }
    });
</script>
</html>